<template>
  <view class="listWrapper" :style="{
                padding:'0px ' + properties.setStyle.pageMargin+'px',
                'margin': properties.setStyle.pageMarginTop+'px '+' 0px',
              }">
    <uv-notify ref="notify" message="success" type="success"></uv-notify>
    <view  v-if="datas.length>0" class="order-card" :style="{
                 'border-radius': properties.setStyle.borderRadiusLeftTop + 'px ' + properties.setStyle.borderRadiusRightTop + 'px '
            + properties.setStyle.borderRadiusRightBottom + 'px ' + properties.setStyle.borderRadiusLeftBottom + 'px ',
                'background-color': properties.setStyle.backgroundColor,
                'min-height':'35px',
                padding: properties.setStyle.padding+'px',
                width:'100%'
              }">
      <view class="head-title">
        <view class="new-text-view">
          <view @click="goDetail(item)">
            <text class="H3" >
              {{properties.setStyle.jsonData.title}}
            </text>
          </view>
<!--          <image src='../../../static/images/hot.png'></image>-->
          <uv-image :customStyle="{'margin-left':'6rpx'}" v-if="properties.setStyle.jsonData.icon" width="15" height="15" :src="properties.setStyle.jsonData.icon"/>
        </view>
        <view class="view-more" @tap="toMore(properties.setStyle.jsonData)">
          <text class="">{{properties.setStyle.jsonData.more}}</text>
        </view>
      </view>
      <view v-for="(item,index) in datas" @click="goDetail(item)">
        <view class="order-content"
              :style="{
                'background':properties.setStyle.innerBackgroundColor,
                'padding': properties.setStyle.innerPadding+'px'
              }"
              >
          <view class="head">
            <view class="left" >
              <view class="avatar">
                <image :src="item.memberAvatar || (item.memberUser && item.memberUser.avatar)"></image>
              </view>
              <view class="name">
                <view class="uName">
                  {{ item.orderName }}
                </view>
              </view>
            </view>
            <view  v-if="!custom" class="center">

              <view class="money" :style="{
              color: properties.setStyle.priceColor
            }">
                <text>酬金：</text>
                <text class="amountValue">{{ item.takeAmount }}</text>
                <text>元</text>
              </view>
            </view>

            <view style="display: flex;align-items: center;flex-direction: column">
              <view class="right">
                <Dict :properties="{dictType:'order_state',dictValue:item.state,size:'mini'}"/>
              </view>
            </view>
          </view>

          <view class="content-text-view">
            <text class="content-text">{{ item.content }}</text>
          </view>

          <view class="content-tip-view">
            <text class="tip-text">时间 {{ item.timeBelongFormat }}</text>
            <text class="tip-text">发布于 {{ item.schoolName }}</text>
          </view>

          <view  class="address">
            <uv-gap height="5"/>
            <view class="actionAddress" style="color: #606266">
              <view style="display: flex">
                <uv-icon name="/static/images/start.png" size="25"/>
                <view>{{item.actionAddress}}</view>
              </view>
              <uv-gap height="10"/>
              <view style="display: flex">
                <uv-icon name="/static/images/end.png" size="25"/>
                <view>{{item.destination}}</view>
              </view>
            </view>
          </view>
        </view>
        <uv-gap height="10" v-if="index!==datas.length-1" />
      </view>
    </view>
  </view>
</template>
<script>
import Dict from '@/components/school/dict';
import SplitLine from '@/components/school/splitLine';
import * as LoginUtil from '@/libs/login.js';
import * as OrderApi from '@/api/school/order.js';
import RichText from '@/components/school/richtext';
import {mapGetters} from "vuex";
import diyJson from '@/config/diy.js';

const app = getApp();
// 分割线
export default {
  computed: mapGetters(['uid', 'schoolId']),
  components: {
    Dict,
    SplitLine,
    RichText
  },
  data() {
    return {
      themConfig: diyJson.commonStyle,
      localDatas: this.datas
    }
  },
  name: "NewOrder",
  props: {
    commonStyle: {
      type: Object,
      default() {
        return {
          /* crmeb颜色变量 */
          theme: {
            color: "#cb6025",
          },
          font: {
            color: "#282828", // 常规字体颜色
            activeColor: "#E93323", // 字体激活颜色 和主题色一至
          },
        };
      }
    },
    isLast: {
      type: Boolean,
      default: function () {
        return true;
      }
    },
    custom: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    datas: {
      type: [Array],
      default: function () {
        return []
      }
    },
    orderNo: {
      type: String,
      default: function () {
        return ''
      }
    },

    /**
     * 1=代表接单页 只展示接单按钮
     * 2=代表接骑手页面
     * 3=发布人
     */
    type: {
      type: String,
      default: function () {
        return '1'
      }
    },
    properties: {
      type: Object,
      default: function () {
        return {
          "setStyle": {
            'borderRadius': 10,
            'backgroundColor': 'white',
            "pageMargin": 10,
            "padding": 10
          }
        }
      }
    },

  },
  watch: {},
  methods: {
    toMore() {
      app.globalData.tabBarIndex = 1;
      uni.$emit("tabBarIndexChange", 1);
      this.$store.commit('SET_TAB_BAR_IDX', 1);
      uni.switchTab({
        "url": '/pages/order/index'
      })
    },

    phoneCall(phone) {
      console.log(phone)
      uni.makePhoneCall({
        phoneNumber: phone // 电话号码
      });
    },

    goDetail(item) {
      if (!this.custom) {
        this.$store.commit('SET_URL_PARAMS', {orderId: item.id});
        uni.navigateTo({
          url: '/pages/school/order-detail/index?params=' + JSON.stringify({orderId: item.id})
        });
      }
    },

  },
  created() {
  }
}
</script>

<style scoped lang="scss">

.head-title {
  .new-text-view {
    display: flex;
    align-items: center;
  }

  display: flex;
  justify-content: space-between;
  padding: 5px 10rpx;
  margin-bottom: 5px;

  .H3 {
    font-size: 19px;
    //color: rgb(94, 94, 94);
  }

  .view-more {
    display: flex;
    font-size: 14px;
    color: #909399;
  }
}

.order-content {
  //background: rgb(234, 239, 252);
  border-radius: 10px;


  .content-text {
    font-size: 16px;
    color: #2c2c2c;
  }

  .content-text-view {
    margin: 15rpx 0;
  }

  .tip-text {
    color: rgb(75, 76, 77);
    font-size: 12px;
  }

  .content-tip-view {
    display: flex;
    justify-content: space-between;
    margin: 5rpx 0;
  }
}

.head {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;

  .left {
    display: flex;
    align-items: center;

    image {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
    }

    .name {
      line-height: 40rpx;
      margin-left: 10px;

      .uName {
        font-weight: bolder;
      }

      .time {
        color: #909399;
        font-size: 12px;
      }
    }
  }
}

.body_time {
  padding: 0px 0 10px 10px;
  color: #606266;
  font-size: 12px;
  display: flex;
}

.body {
  padding: 0px 10px;
  color: #606266;

  .sentive {
    margin-top: 10px;
    padding: 7px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    color: white;
    border-radius: 5px;
    background: #c4c6c9;
    font-weight: initial;
  }
}

.address {
  display: flex;
  flex-direction: column;
  //justify-content: center;
  //align-items: center;

  .centerIcon {
    padding: 0 10px;
  }

  ::v-deep .uv-text__value:first-child {
    color: #606266;
    font-size: 16px !important;
  }
}

.money {
  font-size: 16px;

  .amountValue {
    font-size: 18px !important;
  }
}

.order-card {
  //margin-top: 10px;
}

.operate {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  width: 100%;
}

.orderNo-wrapper {
  display: flex;
  justify-content: space-between;

  .orderno {
    font-size: 13px;
    color: #606266;
  }
}

.content {
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f8f8;
}

.accept {
  display: flex;
  width: 100%;
  position: relative;

  .butt {
    position: relative;
    padding: 0 10px;
    width: 100%;
  }
}

.concat {
  display: flex;
  justify-content: right;
  padding: 10px 20px 0px 20px;
}

.actionAddress {
  padding: 5px 0;
}

.jwy-topRisk {
  color: red;
}

.jwy-lowRisk {
  color: #ff7800;
}
</style>

</style>
